<script lang="ts" setup>
import { Delete20Regular } from '@vicons/fluent'
import { useDialog } from 'naive-ui'

const dialog = useDialog()
const props = defineProps(['chooseing'])
const emit = defineEmits(['change', 'pick', 'del'])
const options = [
  { label: '名称（默认）', key: 'name' },
  { label: '添加日期', key: 'createTime' },
  { label: '最近打开', key: 'lastTime' },
]
const handleSelect = (key: string | number) => {
  emit('change', key)
}
const onPick = () => emit('pick')
const onDel = () => {
  dialog.warning({
    title: '提醒',
    content: '删除操作不可逆，确定删除吗',
    positiveText: '确定',
    negativeText: '取消',
    draggable: true,
    onPositiveClick: () => emit('del'),
  })
}
</script>

<template>
  <n-dropdown trigger="click" :options="options" :show-arrow="true" @select="handleSelect">
    <n-button>排序</n-button>
  </n-dropdown>
  <n-button round @click="onPick">选择</n-button>
  <n-button v-show="props.chooseing" text type="error" @click="onDel">
    <template #icon>
      <n-icon><Delete20Regular /></n-icon>
    </template>
    删除
  </n-button>
</template>
